<template>
  <div class="container">
    <el-popover :ref="popoName" placement="right" trigger="hover">
      <p><strong>{{this.infoWindow.title}}</strong></p>
      <div class="detail">
        <ul id="menu" style="background-color: green;"></ul>
      </div>
    </el-popover>
    <baidu-map class="box" center="济南" :scrollWheelZoom="true">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
      <bm-label v-for="(item,ids) in coordinate1"
                :key="ids"
                :content="item.placenum.toString()"
                :position="{lng: item.longitude, lat: item.latitude}"
                :labelStyle="labelStyle1"
                :offset="{'width':-16,'height':-37}"
                @click="openInfo(item)"
                title="点我"/>
      <bm-label v-for="(item,ids) in coordinate2" :key="ids" :content="item.placenum.toString()"
                :position="{lng: item.longitude, lat: item.latitude}"
                :labelStyle="labelStyle2"
                :offset="{'width':-16,'height':-37}"
                @click="openInfo(item)"
                title="点我"/>
      <bm-label v-for="(item,ids) in coordinate3" :key="ids" :content="item.placenum.toString()"
                :position="{lng: item.longitude, lat: item.latitude}"
                :labelStyle="labelStyle3"
                :offset="{'width':-16,'height':-37}"
                @click="openInfo(item)"
                title="点我"/>
      <bm-info-window :position="{lng: infoWindow.longirude, lat: infoWindow.latitude}" :show="show"
                      @close="infoWindowClose" @open="infoWindowOpen">
        <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>{{this.infoWindow.title}}</strong></p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">停车场编号：{{this.infoWindow.parkNo}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">所属单位：{{this.infoWindow.dw}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">收费标准：{{this.infoWindow.chargeType}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">
          停车位信息：{{this.infoWindow.totalNum}}个泊位，{{this.infoWindow.surplus}}个可用</p>
        <el-row>
          <el-col :sm="16">&nbsp;</el-col>
          <el-col :sm="8">
            <el-button v-popover:popo="popoName" @mouseover.native="selBrethLi">详情</el-button>
          </el-col>
        </el-row>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
  import { selParking } from '../../../api/dashboard'
  import { selParkingRemainPlace } from '../../../api/dashboard'
  import { selParkingBreth } from '../../../api/dashboard'
  import $ from 'jquery'

  export default {
    data() {
      return {
        popoName: 'popos', // 弹出框名称
        show: false,
        infoWindow: {
          longirude: 0,
          latitude: 0,
          title: '',
          parkNo: '',
          dw: '',
          chargeType: '',
          totalNum: '',
          surplus: ''
        },
        coordinate1: [],
        coordinate2: [],
        coordinate3: [],
        labelStyle1: {
          backgroundColor: 'transparent',
          color: '#fff',
          border: '0px',
          fontSize: '14px',
          fontWeight: '300',
          width: '28px',
          height: '37px',
          textAlign: 'center',
          lineHeight: '33px',
          background: 'url(../src/assets/map_images/markersfull.png) no-repeat'
        },
        labelStyle2: {
          backgroundColor: 'transparent',
          color: '#fff',
          border: '0px',
          fontSize: '14px',
          fontWeight: '300',
          width: '28px',
          height: '37px',
          textAlign: 'center',
          lineHeight: '33px',
          background: 'url(../src/assets/map_images/markersidle.png) no-repeat'
        },
        labelStyle3: {
          backgroundColor: 'transparent',
          color: '#fff',
          border: '0px',
          fontSize: '14px',
          fontWeight: '300',
          width: '28px',
          height: '37px',
          textAlign: 'center',
          lineHeight: '33px',
          background: 'url(../src/assets/map_images/markersoffduty.png) no-repeat'
        }
      }
    },
    mounted: function() {
      selParking('1').then(res => {
        for (var i = 0; i < res.length; i++) {
          if (res[i].sfbz === 'SFBZ01') {
            this.coordinate1.push(res[i])
          } else if (res[i].sfbz === 'SFBZ02') {
            this.coordinate2.push(res[i])
          } else {
            this.coordinate3.push(res[i])
          }
        }
      })
    },
    methods: {
      infoWindowClose(e) {
        this.show = false
      },
      infoWindowOpen(e) {
        this.show = true
      },
      clear() {
        this.infoWindow.contents = ''
      },
      openInfo(val) {
        selParkingRemainPlace(val.parkno).then(res => {
          this.popoName = val.parkno
          this.infoWindow.title = val.parkname
          this.infoWindow.longirude = val.longitude
          this.infoWindow.latitude = val.latitude
          this.infoWindow.parkNo = val.parkno
          this.infoWindow.dw = val.ssdwname
          this.infoWindow.totalNum = val.placenum
          this.infoWindow.chargeType = val.sfbzname
          this.infoWindow.surplus = res.park_remaincount
          this.show = true
        })
      },
      selBrethLi: function() {
        selParkingBreth(this.infoWindow.parkNo).then(res => {
          console.log(res)
          $('#menu').empty()
          $('#menu').append(res)
        })
      }
    }
  }
</script>

<style scoped>
  .container {
    position: relative;
    padding: 20px;
    width: 100%;
    height: 85vh;
  }

  .detail {
    width: 400px;
    height: 400px;
    overflow: auto;
  }

  .box {
    width: 100%;
    height: 100%;
  }
  li {
    list-style:none; /* 将默认的列表符号去掉 */
    padding:0; /* 将默认的内边距去掉 */
    margin:0; /* 将默认的外边距去掉 */
    float:left;
    padding:8px 50px;
    color:#fff;
    border-right:1px solid #000;
  }
</style>
